<template>
    <div class="students-container">
        <div class="school-box" >
                 <i-tabs :current="current_school_scroll"   @change="handleChangeScroll">
                   <i-tab :key="school.id" :title="school.name" v-for="school in school_list">
                   </i-tab>
                </i-tabs>
        </div>
        <div class="class-box">
             <i-tabs :current="current_student_scroll"   @change="handleChangeStudentScroll">
                   <i-tab :key="student.id" :title="student.className" v-for="student in student_list" ></i-tab>
                </i-tabs>
        </div>
        <div class="divider"></div>
        <div class="students-box">
             <i-panel @click="gotodetail">
                <div class="student-item" slot="content">

                    <i-row>
                        <i-col span="6" i-class="col-class">
                            <div class="img-box">
                                <img src="../../../static/images/avatar.png" alt="">
                            </div>
                        </i-col>
                        <i-col span="18" i-class="col-class">

                            <i-row>
                                 <div class="info">
                                     <i-col span='12'>
                                          <div class="name">学员名称</div>
                                     </i-col>
                                    <i-col span='12'>
                                        <div class="joinDate">18.2.23 
                                            <div class="del">【报名时间】</div>
                                        </div>
                                    </i-col>                                    
                                </div>
                            </i-row>
                            <div class='empty'>
                                
                            </div>
                            <i-row>
                                <div class="status">
                                     <i-col span='12' class="learn">
                                          <div > 科目一学习中 </div>
                                     </i-col>
                                    <i-col span='12'>
                                       
                                        <div class="go"> 
                                             <i-icon type="enter" size="20" color="#80848f" />
                                        </div>
                                    </i-col>                                    
                                </div>
                            </i-row>
                        </i-col>
                    </i-row>
                </div>  
            </i-panel>

            <i-panel @click="gotodetail">
                <div class="student-item" slot="content">

                    <i-row>
                        <i-col span="6" >
                            <div class="img-box">
                                <img src="../../../static/images/avatar.png" alt="">
                            </div>
                        </i-col>
                        <i-col span="18">

                            <i-row>
                                 <div class="info">
                                     <i-col span='12'>
                                          <div class="name">学员名称</div>
                                     </i-col>
                                    <i-col span='12'>
                                        <div class="joinDate">18.2.23 
                                            <div class="del">【报名时间】</div>
                                        </div>
                                    </i-col>                                    
                                </div>
                            </i-row>
                            <div class='empty'>
                                
                            </div>
                            <i-row>
                                <div class="status">
                                     <i-col span='12' class="learn">
                                          <div > 科目一学习中 </div>
                                     </i-col>
                                    <i-col span='12'>
                                       
                                        <div class="go"> 
                                             <i-icon type="enter" size="20" color="#80848f" />
                                        </div>
                                    </i-col>                                    
                                </div>
                            </i-row>
                        </i-col>
                    </i-row>
                </div>  
            </i-panel>
            
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            current: 'tab1',
            current_school_scroll: '1', // 默认值需要排除没有的可能性 学校的index值
            school_list:[
                {
                    "id": 1,
                    "name": "学车云涪城区分校first",
                    "className": [
                        {
                        "id": 1,
                        "className": "普通班"
                        },
                        {
                        "id": 2,
                        "className": "高级班"
                        }
                    ]
                    },
                    {
                    "id": 2,
                    "name": "盼盼云涪城区分校",
                    "className": [
                        {
                        "id": 3,
                        "className": "高级班"
                        }
                    ]
                    },
                    {
                    "id": 3,
                    "name": "阳光高新区分校",
                    "className": [
                        {
                        "id": 4,
                        "className": "普通班"
                        }
                    ]
                    }
            ],
            student_list:[
                    {
                        "id": -2,
                        "className": "普通班"
                        },
                        {
                        "id": -3,
                        "className": "高级班"
                        }
            ],
            current_student_scroll:'-2', // 默认班级的index值
             tabs: [
                {title: '学车云涪城区分校first', content: '内容一'},
                {title: '选项二', content: '内容二'},
                {title: '选项三', content: '内容三'},
                {title: '选项三', content: '内容三'},
                {title: '学车云涪城区分校first', content: '内容三'},
                {title: '选项三', content: '内容三'},
                {title: '学车云涪城区分校first', content: '内容三'},
                {title: '选项三', content: '内容三'}
                ]
        }
    },
    methods:{
        handleChangeScroll (detail) {
            console.log(detail)
             this.current_school_scroll = detail.target.key 
             let id = -1;
             id = this.current_school_scroll;
             if(id>-1){
                this.student_list = this.school_list[id-1].className;
             }
        },handleChangeStudentScroll(detail){
            this.current_student_scroll = detail.target.key;
        },
        gotodetail(){
            // console.log('gotodetail')
            wx.navigateTo({
                url: '/pages/studentdetail/main?id=1'
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.students-container{
    background-color: #f0f0f0;
    .school-box{
        // .tabs{
        //     // font-size: 12px;
        //     // width: 100%;
        //     margin-left: 12px;
        //     border:1px solid red;
        //     // text-indent: 1em;

            
        // .mytabs{
        //     // width: 100%;
        //      font-size:12px;
             
        //     margin:0  10px;
        //     padding:0 10px;
        //      width:30% !important;
        //     //  margin-left:10px !important;
        //      overflow: hidden !important;
        //     border:1px solid purple;
        // }
        // }

    }
    .divider{
        height: 10px;        
    }
    .students-box{
        
        
        .student-item{
            margin:10px 0;
            
            .img-box{
                margin-left:20px;
                 width: 60px;
                 height: 60px;
                //  border: 1px solid red;
                
                image{
                    width: 100%;
                    height:100%;
                }
            }
            .info{
                margin-top:5px;
                 font-size: 14px;
                
                .joinDate{
                    font-size: 12px;
                    color:#80848f;
                }
                .del{
                    display: inline;
                    text-decoration:line-through;
                }
            }
            .empty{
                height: 10px;
            }
            .status{
                vertical-align: bottom;
                font-size: 14px;
                text-align: left;

                .learn{
                    color: #2d8cf0;
                }
                .go{
                    // right: 0;
                    // position: relative;
                    // right: 0;
                    text-align: right;
                }
            }

        }
    }
}
</style>

